@rbxts/uiblox 0.2.0-alpha.3 → 0.2.0-alpha.30

package/README.md

@@ -2,13 +2,35 @@
 
 # uiblox-rbxts
 
+> This package is a work in progress.
+
 UI library and theming for roblox-ts projects.
 
+## Background
+
+Roblox has their own internal design system, coined "uiblox-web", that it uses for its new
+web-facing products. This system offers reusable components, implemented in
+React Typescript, that are derived from material UI (MUI). As well, it offers a
+common theme/pallete for consistent UI/UX.
+
+Anyone is able to view their design system as
+[UIBlox-Web](https://uiblox.roblox.com). You can see that they leverage
+[Storybook](https://storybook.js.org), a UI component explorer for frontend
+developers, to render component previews.
+
+Design systems all help engineers cut down on implementation time and ensure
+consitent UX across products.
+
 ## Overview
 
-Uiblox is a roblox-ts UI kit: semantic themes, `makeStyles` / `createStyles`, and typed React components for Studio and games. Public APIs aim for familiar Material UI–style capability (props and behavior), implemented independently for Roblox Instances, input modes, and performance.
+So what is uiblox-rbxts? Simply put, its my stab at a design system that mimics
+uiblox-web for games written using roblox-ts.
 
-Main exports from `@rbxts/uiblox`:
+UIBlox-rbxts aims to provide extensible components that can be reusable by
+anyone who installs this npm package. It also offers a theme and styling system
+that aids UI/UX consistentency.
+
+How does it do this? Well, there are two main exports from this package:
 
 -   @rbxts/uiblox -> theme
     -   An extensible Theme type + default Dark (default) and Light themes
@@ -24,47 +46,11 @@ Main exports from `@rbxts/uiblox`:
 
 ### Installation
 
-```
-npm install @rbxts/uiblox
-```
-
-## Quickstart
+Install the package to get started.
 
-1. Wrap your app (or a subtree) in `ThemeProvider` with `DarkTheme` or `LightTheme`.
-2. Build styles with `makeStyles` / `createStyles` (or `componentStyles`) and spread them onto Instances.
-3. For hover/press/focus/disabled (and list `_first` / `_last`), put `_hover`-style keys on the style table and call `resolveStyle(style, state)` before spreading.
-4. Use packaged components from `@rbxts/uiblox` (`Button`, `Input`, `Select`, …).
-5. Preview components in [Storyblox](https://github.com/bjlarouche/storyblox) with `*.stories` modules.
+`npm install @rbxts/uiblox`
 
-Token reference (spacing, density, typography, shape, palette, `resolveStyle`): [docs/STYLING.md](docs/STYLING.md).
-
-```tsx
-import React from "@rbxts/react";
-import { Button, DarkTheme, ThemeProvider } from "@rbxts/uiblox";
-
-export function App() {
-	return (
-		<ThemeProvider theme={DarkTheme}>
-			<Button text="Continue" onLeftClick={() => {}} />
-		</ThemeProvider>
-	);
-}
-```
-
-## Parity checklist
-
-Capability parity, not pixel parity. For each public component, expect:
-
-- [ ] Typed controlled props where interaction needs state
-- [ ] Theme tokens (light/dark) via `ThemeProvider`
-- [ ] Style slots / variants through the styling helpers
-- [ ] Disabled / loading / error when the control type warrants it
-- [ ] Mouse, touch, and gamepad-friendly activation where interactive
-- [ ] Cleanup and focused unit checks in-repo
-- [ ] `stateMatrix` rows for visual capture planning
-- [ ] A Storyblox story (dev fixtures OK)
-
-Skipped on purpose: browser-only addons (MDX, iframes, hosted visual-review clouds).
+Spacing, density, and sx notes are in [docs/STYLING.md](docs/STYLING.md).
 
 ## Example
 
@@ -211,74 +197,6 @@ const useMyComponentStyles = makeStyles<MyComponentProps>((theme: Theme, props:
 export default useMyComponentStyles;
 ```
 
-### Style precedence
-
-Components spread their own styles first, then `className`, then the props that
-carry state. Later always wins:
-
-1. Component styles from the theme
-2. `className` (merge several with `cx(a, condition && b)`; later args win, falsy
-   args are skipped)
-3. State props the component owns: `Active`, `Selectable`, `Text`, and the
-   value-driven sizes/positions of Slider, SplitPane, and so on
-
-So `className` can restyle anything except a control's state. Pass `disabled`
-instead of overriding `Active`.
-
-### Controls
-
-Inputs are controlled: `{ value, onChange, disabled? }`. They call `onChange`
-only when the value actually changes, and never while disabled.
-
-| Component | Value | Notes |
-| --- | --- | --- |
-| Checkbox | `boolean` | `mixed` shows indeterminate; activating commits `true` |
-| Switch | `boolean` | |
-| RadioGroup / Select / Tabs | `T` from `options: { label, value: T, disabled? }[]` | compared by identity; disabled options are skipped |
-| NumberInput | `number` | commits on focus lost or Enter; clamps to `min`/`max`, snaps to `step` |
-| Slider | `number` | `onChange` while dragging, `onCommit` on release |
-| SplitPane | first pane size (px) | display clamps to `min`/`max`; Escape cancels a drag |
-| Input | `text` | `onInput` while typing, `onTextChanged` on commit |
-
-Select and Tooltip render through `Popup`, which portals into the nearest
-`LayerCollector` so clipping parents do not cut them off. The popup follows its
-anchor when that anchor moves or resizes, and Select closes if the anchor leaves
-the layer. Select handles Up, Down, Enter, and Escape while it is open or
-selected, including when the pointer is not over it.
-
-### Loading
-
-`Skeleton` covers a block that is still loading. `variant` is `text`,
-`rectangular`, `rounded`, or `circular`. `width` and `height` are pixels.
-`lines` and `gap` stack text rows. `SkeletonText` is the text variant.
-`animation` is `pulse`, `shimmer`, or `false`. `reducedMotion` holds the block
-still. A later theme preference can set that prop for you.
-
-`CircularProgress` spins while `value` is omitted. A `value` from 0 to 1 draws
-an arc and stops the spin. `size`, `thickness`, and `color` restyle the ring.
-`LinearProgress` is the existing `ProgressBar`: pass `value` from 0 to 1 or
-`progress` from 0 to 100. `indeterminate` slides the bar. `disabled` and
-`reducedMotion` stop the motion and fade the fill.
-
-`Button` and `IconButton` take `loading`. The control ignores clicks, hover,
-and focus while loading, and its size stays put. `loadingLabel` replaces the
-caption. `loadingPosition` is `start`, `center`, or `end`. `reducedMotion`
-keeps the spinner still.
-
-### State captures
-
-`stateMatrix` is the gallery list for Storyblox. Each row is one shot: `theme`
-(`Dark` or `Light`), `width`, and `pointer` (`rest`, `hover`, `press`, or
-`focus`). Rows are built in small helper functions and concatenated so the
-compiled Luau chunk stays under the 200-local register limit. `open` means the
-Select list is showing. `options` and `disabledOption` build RadioGroup, Select,
-and Tabs. `selected` and `filter` are TreeView. `value`, `text`, `disabled`,
-`loading`, `mixed`, `hasError`, and `placeholder` are that control's props.
-`variant`, `animation` (`pulse`, `shimmer`, or `false`), `reducedMotion`, and
-`indeterminate` cover skeleton and progress shots. Those shots stay still when
-`animation` is `false` or `reducedMotion` is set. Hover, press, and focus rows
-are only there when the control actually changes.
-
 ### Client
 
 Some sample logic for mounting app when player spawns (on client).

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 {};