@k9kbdev/roblox-css 0.1.0

package/out/primitives/Input.luau

@@ -0,0 +1,126 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+--[[
+	*
+	 * Input.tsx — <input> equivalent for Roblox.
+	 *
+	 * Renders a <textbox> with web-like style props.
+	 * Extends the core webStyle translation by adding input-specific mappings.
+	 * Automatically maps web-like placeholder and onChange props to their
+	 * Roblox equivalents for a more familiar developer experience.
+	 *
+	 * Input mappings:
+	 *   Web Property        → Roblox Output
+	 *   ─────────────────────────────────────────────────────────
+	 *   placeholder         → PlaceholderText (string)
+	 *   onChange(text)      → Change.Text (event listener)
+	 *   style               → (Maps via webStyle)
+	 *
+	 * Maps to: HTML <input> → Roblox <textbox>
+	 *
+	 * Usage:
+	 *   <Input
+	 *     placeholder="Enter your name..."
+	 *     onChange={(text) => print("User typed:", text)}
+	 *     style={{ width: 200, height: 40, backgroundColor: "#FFFFFF" }}
+	 *   />
+	 
+]]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local webStyle = TS.import(script, script.Parent.Parent, "styles", "webStyle").webStyle
+--[[
+	*
+	 * Branded InputProps — the `_inputProps` brand ensures strict nominal typing.
+	 * This prevents accidental bypasses or incorrect prop structures.
+	 
+]]
+--* Helper to construct a branded InputProps. 
+local function makeInputProps(props)
+	return props
+end
+--[[
+	*
+	 * Input component — The primary component for receiving user text input.
+	 *
+	 * Maps to: HTML <input> → Roblox <textbox>
+	 * Renders a native <textbox> while mapping web input props to Roblox properties.
+	 
+]]
+local Input = React.forwardRef(function(props, ref)
+	local style = props.style
+	local children = props.children
+	local placeholder = props.placeholder
+	local onChange = props.onChange
+	local defaultProps = {
+		BackgroundTransparency = 1,
+		Text = "",
+	}
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	local explicitProps = _object
+	explicitProps.style = nil
+	explicitProps.children = nil
+	explicitProps.placeholder = nil
+	explicitProps.onChange = nil
+	if placeholder ~= nil then
+		explicitProps.PlaceholderText = placeholder
+	end
+	-- Merge user-provided Change listeners with our internal Text handler
+	-- to avoid silently overwriting user event handlers.
+	local userChange = (props.Change) or {}
+	local _object_1 = table.clone(userChange)
+	setmetatable(_object_1, nil)
+	local mergedChange = _object_1
+	if onChange then
+		mergedChange.Text = function(rbx)
+			onChange(rbx.Text)
+			-- Forward to user handler if present
+			local userHandler = userChange.Text
+			if userHandler ~= nil then
+				userHandler(rbx)
+			end
+		end
+	end
+	explicitProps.Change = nil
+	local hasChange = onChange ~= nil or (next(userChange)) ~= nil
+	if style then
+		local parsed = webStyle(style)
+		local _attributes = {
+			ref = ref,
+		}
+		for _k, _v in defaultProps do
+			_attributes[_k] = _v
+		end
+		for _k, _v in (parsed.props) do
+			_attributes[_k] = _v
+		end
+		for _k, _v in explicitProps do
+			_attributes[_k] = _v
+		end
+		for _k, _v in (if hasChange then {
+			Change = mergedChange,
+		} else {}) do
+			_attributes[_k] = _v
+		end
+		return React.createElement("textbox", _attributes, parsed.children, children)
+	end
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in defaultProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in explicitProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in (if hasChange then {
+		Change = mergedChange,
+	} else {}) do
+		_attributes[_k] = _v
+	end
+	return React.createElement("textbox", _attributes, children)
+end)
+return {
+	makeInputProps = makeInputProps,
+	Input = Input,
+}

package/out/primitives/MotionBox.d.ts

@@ -0,0 +1,15 @@
+import React from "@rbxts/react";
+import { CSSProperties } from "../styles/webStyle";
+import { MotionProps } from "./useVariantResolver";
+export type MotionBoxProps = React.PropsWithChildren<React.ComponentProps<"frame">> & {
+    style?: CSSProperties;
+} & MotionProps & {
+    readonly _motionBoxProps?: unique symbol;
+};
+/**
+ * MotionBox component — Declarative animated equivalent of Box.
+ *
+ * Exposes Framer Motion-like props (`animate`, `variants`, `transition`)
+ * over the base `webStyle` layout engine.
+ */
+export declare const MotionBox: React.ForwardRefExoticComponent<Omit<MotionBoxProps, "ref"> & React.RefAttributes<Frame>>;

package/out/primitives/MotionBox.luau

@@ -0,0 +1,69 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local webStyle = TS.import(script, script.Parent.Parent, "styles", "webStyle").webStyle
+local useVariantResolver = TS.import(script, script.Parent, "useVariantResolver").useVariantResolver
+--[[
+	*
+	 * MotionBox component — Declarative animated equivalent of Box.
+	 *
+	 * Exposes Framer Motion-like props (`animate`, `variants`, `transition`) 
+	 * over the base `webStyle` layout engine.
+	 
+]]
+local MotionBox = forwardRef(function(props, ref)
+	local animate = props.animate
+	local initial = props.initial
+	local variants = props.variants
+	local transition = props.transition
+	local style = props.style
+	local children = props.children
+	local _binding = useVariantResolver(animate, initial, variants, transition)
+	local animatedProps = _binding.animatedProps
+	local staticProps = _binding.staticProps
+	local defaultProps = {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	local explicitProps = _object
+	explicitProps.animate = nil
+	explicitProps.initial = nil
+	explicitProps.variants = nil
+	explicitProps.transition = nil
+	explicitProps.style = nil
+	explicitProps.children = nil
+	explicitProps._motionBoxProps = nil
+	local parsedStyleProps = {}
+	local parsedStyleChildren = {}
+	if style then
+		local parsed = webStyle(style)
+		parsedStyleProps = parsed.props
+		parsedStyleChildren = parsed.children
+	end
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in defaultProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in parsedStyleProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in explicitProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in staticProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in animatedProps do
+		_attributes[_k] = _v
+	end
+	return React.createElement("frame", _attributes, parsedStyleChildren, children)
+end)
+return {
+	MotionBox = MotionBox,
+}

package/out/primitives/MotionButton.d.ts

@@ -0,0 +1,15 @@
+import React from "@rbxts/react";
+import { CSSProperties } from "../styles/CSSTypes";
+import { MotionProps } from "./useVariantResolver";
+export type MotionButtonProps = React.PropsWithChildren<React.ComponentProps<"textbutton">> & {
+    style?: CSSProperties;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+} & MotionProps & {
+    readonly _motionButtonProps?: unique symbol;
+};
+/**
+ * MotionButton component — Declarative animated equivalent of Button.
+ */
+export declare const MotionButton: React.ForwardRefExoticComponent<Omit<MotionButtonProps, "ref"> & React.RefAttributes<TextButton>>;

package/out/primitives/MotionButton.luau

@@ -0,0 +1,146 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local webStyle = TS.import(script, script.Parent.Parent, "styles", "webStyle").webStyle
+local useVariantResolver = TS.import(script, script.Parent, "useVariantResolver").useVariantResolver
+local function buttonParser(style)
+	-- Delegate entirely to webStyle() which already handles all typography
+	-- properties (fontSize, textAlign, whiteSpace, color, fontFamily, fontWeight).
+	-- Previously this duplicated that logic with a different default font (SourceSansPro
+	-- vs BuilderSans), causing an inconsistency.
+	local parsed = webStyle(style)
+	return parsed.props
+end
+--[[
+	*
+	 * MotionButton component — Declarative animated equivalent of Button.
+	 
+]]
+local MotionButton = forwardRef(function(props, ref)
+	local animate = props.animate
+	local initial = props.initial
+	local variants = props.variants
+	local transition = props.transition
+	local style = props.style
+	local children = props.children
+	local onClick = props.onClick
+	local onMouseEnter = props.onMouseEnter
+	local onMouseLeave = props.onMouseLeave
+	local _binding = useVariantResolver(animate, initial, variants, transition, buttonParser)
+	local animatedProps = _binding.animatedProps
+	local staticProps = _binding.staticProps
+	local defaultProps = {
+		BackgroundTransparency = 1,
+		TextWrapped = true,
+		Text = "",
+		AutoButtonColor = false,
+	}
+	if props.Size == nil and (not style or (style.width == nil and style.height == nil)) then
+		defaultProps.AutomaticSize = Enum.AutomaticSize.XY
+	end
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	local explicitProps = _object
+	explicitProps.animate = nil
+	explicitProps.initial = nil
+	explicitProps.variants = nil
+	explicitProps.transition = nil
+	explicitProps.style = nil
+	explicitProps.children = nil
+	explicitProps.onClick = nil
+	explicitProps.onMouseEnter = nil
+	explicitProps.onMouseLeave = nil
+	explicitProps._motionButtonProps = nil
+	-- 3. Map primitive children directly to the Text property
+	if type(children) == "string" or type(children) == "number" then
+		explicitProps.Text = tostring(children)
+	end
+	local parsedStyleProps = {}
+	local parsedStyleChildren = {}
+	-- 4. If a style object is provided, compile it and extract typography mappings
+	if style then
+		local parsed = webStyle(style)
+		parsedStyleProps = parsed.props
+		parsedStyleChildren = parsed.children
+		-- wordBreak — inject zero-width spaces or newlines for character-level wrapping
+		if style.wordBreak ~= nil then
+			if style.wordBreak == "break-all" then
+				local _text = explicitProps.Text
+				if type(_text) == "string" then
+					explicitProps.Text = table.concat(string.split(explicitProps.Text, ""), "\u{200B}")
+				end
+			elseif style.wordBreak == "keep-all" then
+				local _text = explicitProps.Text
+				if type(_text) == "string" then
+					explicitProps.Text = table.concat(string.split(explicitProps.Text, " "), "\n")
+				end
+			end
+		end
+		-- textTransform — mutate text content
+		if style.textTransform ~= nil and style.textTransform ~= "none" then
+			local _text = explicitProps.Text
+			if type(_text) == "string" then
+				if style.textTransform == "uppercase" then
+					explicitProps.Text = string.upper((explicitProps.Text))
+				elseif style.textTransform == "lowercase" then
+					explicitProps.Text = string.lower((explicitProps.Text))
+				elseif style.textTransform == "capitalize" then
+					explicitProps.Text = (string.gsub((explicitProps.Text), "%w+", function(word)
+						return string.upper(string.sub(word, 1, 1)) .. string.sub(word, 2)
+					end))
+				end
+			end
+		end
+		-- textDecoration — wrap text in rich text tags (RichText=true is set by webStyle)
+		if style.textDecoration ~= nil and style.textDecoration ~= "none" then
+			local _text = explicitProps.Text
+			if type(_text) == "string" then
+				if style.textDecoration == "underline" then
+					explicitProps.Text = `<u>{explicitProps.Text}</u>`
+				elseif style.textDecoration == "line-through" then
+					explicitProps.Text = `<s>{explicitProps.Text}</s>`
+				end
+			end
+		end
+	end
+	-- 5. Map React-style event props to the Roblox Event table
+	local existingEvents = (props.Event) or {}
+	local _object_1 = table.clone(existingEvents)
+	setmetatable(_object_1, nil)
+	local mergedEvents = _object_1
+	if onClick ~= nil then
+		mergedEvents.Activated = onClick
+	end
+	if onMouseEnter ~= nil then
+		mergedEvents.MouseEnter = onMouseEnter
+	end
+	if onMouseLeave ~= nil then
+		mergedEvents.MouseLeave = onMouseLeave
+	end
+	explicitProps.Event = mergedEvents
+	-- 6. Render the native textbutton with merged properties and children
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in defaultProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in parsedStyleProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in explicitProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in staticProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in animatedProps do
+		_attributes[_k] = _v
+	end
+	return React.createElement("textbutton", _attributes, parsedStyleChildren, if type(children) == "string" or type(children) == "number" then nil else children)
+end)
+return {
+	MotionButton = MotionButton,
+}

package/out/primitives/MotionImage.d.ts

@@ -0,0 +1,13 @@
+import React from "@rbxts/react";
+import { CSSProperties } from "../styles/CSSTypes";
+import { MotionProps } from "./useVariantResolver";
+export type MotionImageProps = React.PropsWithChildren<React.ComponentProps<"imagelabel">> & {
+    style?: CSSProperties;
+    src?: string;
+} & MotionProps & {
+    readonly _motionImageProps?: unique symbol;
+};
+/**
+ * MotionImage component — Declarative animated equivalent of Image.
+ */
+export declare const MotionImage: React.ForwardRefExoticComponent<Omit<MotionImageProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/primitives/MotionImage.luau

@@ -0,0 +1,70 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local webStyle = TS.import(script, script.Parent.Parent, "styles", "webStyle").webStyle
+local useVariantResolver = TS.import(script, script.Parent, "useVariantResolver").useVariantResolver
+--[[
+	*
+	 * MotionImage component — Declarative animated equivalent of Image.
+	 
+]]
+local MotionImage = forwardRef(function(props, ref)
+	local animate = props.animate
+	local initial = props.initial
+	local variants = props.variants
+	local transition = props.transition
+	local style = props.style
+	local src = props.src
+	local children = props.children
+	local _binding = useVariantResolver(animate, initial, variants, transition)
+	local animatedProps = _binding.animatedProps
+	local staticProps = _binding.staticProps
+	local defaultProps = {
+		BackgroundTransparency = 1,
+	}
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	local explicitProps = _object
+	explicitProps.animate = nil
+	explicitProps.initial = nil
+	explicitProps.variants = nil
+	explicitProps.transition = nil
+	explicitProps.style = nil
+	explicitProps.src = nil
+	explicitProps.children = nil
+	explicitProps._motionImageProps = nil
+	if src ~= nil then
+		explicitProps.Image = src
+	end
+	local parsedStyleProps = {}
+	local parsedStyleChildren = {}
+	if style then
+		local parsed = webStyle(style)
+		parsedStyleProps = parsed.props
+		parsedStyleChildren = parsed.children
+	end
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in defaultProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in parsedStyleProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in explicitProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in staticProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in animatedProps do
+		_attributes[_k] = _v
+	end
+	return React.createElement("imagelabel", _attributes, parsedStyleChildren, children)
+end)
+return {
+	MotionImage = MotionImage,
+}

package/out/primitives/MotionText.d.ts

@@ -0,0 +1,12 @@
+import React from "@rbxts/react";
+import { CSSProperties } from "../styles/CSSTypes";
+import { MotionProps } from "./useVariantResolver";
+export type MotionTextProps = React.PropsWithChildren<React.ComponentProps<"textlabel">> & {
+    style?: CSSProperties;
+} & MotionProps & {
+    readonly _motionTextProps?: unique symbol;
+};
+/**
+ * MotionText component — Declarative animated equivalent of Text.
+ */
+export declare const MotionText: React.ForwardRefExoticComponent<Omit<MotionTextProps, "ref"> & React.RefAttributes<TextLabel>>;

package/out/primitives/MotionText.luau

@@ -0,0 +1,116 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local webStyle = TS.import(script, script.Parent.Parent, "styles", "webStyle").webStyle
+local useVariantResolver = TS.import(script, script.Parent, "useVariantResolver").useVariantResolver
+local function textParser(style)
+	return webStyle(style).props
+end
+--[[
+	*
+	 * MotionText component — Declarative animated equivalent of Text.
+	 
+]]
+local MotionText = forwardRef(function(props, ref)
+	local animate = props.animate
+	local initial = props.initial
+	local variants = props.variants
+	local transition = props.transition
+	local style = props.style
+	local children = props.children
+	local _binding = useVariantResolver(animate, initial, variants, transition, textParser)
+	local animatedProps = _binding.animatedProps
+	local staticProps = _binding.staticProps
+	local defaultProps = {
+		BackgroundTransparency = 1,
+		TextWrapped = true,
+		Text = "",
+	}
+	if props.Size == nil and (not style or (style.width == nil and style.height == nil)) then
+		defaultProps.AutomaticSize = Enum.AutomaticSize.XY
+	end
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	local explicitProps = _object
+	explicitProps.animate = nil
+	explicitProps.initial = nil
+	explicitProps.variants = nil
+	explicitProps.transition = nil
+	explicitProps.style = nil
+	explicitProps.children = nil
+	explicitProps._motionTextProps = nil
+	if type(children) == "string" or type(children) == "number" then
+		explicitProps.Text = tostring(children)
+	end
+	local parsedStyleProps = {}
+	local parsedStyleChildren = {}
+	if style then
+		local parsed = webStyle(style)
+		parsedStyleProps = parsed.props
+		parsedStyleChildren = parsed.children
+		-- Specialized string manipulation for wordBreak
+		if style.wordBreak ~= nil then
+			if style.wordBreak == "break-all" then
+				local _text = explicitProps.Text
+				if type(_text) == "string" then
+					explicitProps.Text = table.concat(string.split(explicitProps.Text, ""), "\u{200B}")
+				end
+			elseif style.wordBreak == "keep-all" then
+				local _text = explicitProps.Text
+				if type(_text) == "string" then
+					explicitProps.Text = table.concat(string.split(explicitProps.Text, " "), "\n")
+				end
+			end
+		end
+		-- textTransform — mutate text content
+		if style.textTransform ~= nil and style.textTransform ~= "none" then
+			local _text = explicitProps.Text
+			if type(_text) == "string" then
+				if style.textTransform == "uppercase" then
+					explicitProps.Text = string.upper((explicitProps.Text))
+				elseif style.textTransform == "lowercase" then
+					explicitProps.Text = string.lower((explicitProps.Text))
+				elseif style.textTransform == "capitalize" then
+					explicitProps.Text = (string.gsub((explicitProps.Text), "%w+", function(word)
+						return string.upper(string.sub(word, 1, 1)) .. string.sub(word, 2)
+					end))
+				end
+			end
+		end
+		-- textDecoration — wrap text in rich text tags (RichText=true is set by webStyle)
+		if style.textDecoration ~= nil and style.textDecoration ~= "none" then
+			local _text = explicitProps.Text
+			if type(_text) == "string" then
+				if style.textDecoration == "underline" then
+					explicitProps.Text = `<u>{explicitProps.Text}</u>`
+				elseif style.textDecoration == "line-through" then
+					explicitProps.Text = `<s>{explicitProps.Text}</s>`
+				end
+			end
+		end
+	end
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in defaultProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in parsedStyleProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in explicitProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in staticProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in animatedProps do
+		_attributes[_k] = _v
+	end
+	return React.createElement("textlabel", _attributes, parsedStyleChildren, if type(children) == "string" or type(children) == "number" then nil else children)
+end)
+return {
+	MotionText = MotionText,
+}

package/out/primitives/MotionUIScale.d.ts

@@ -0,0 +1,9 @@
+import React from "@rbxts/react";
+import { MotionProps } from "./useVariantResolver";
+export type MotionUIScaleProps = React.ComponentProps<"uiscale"> & MotionProps & {
+    readonly _motionUIScaleProps?: unique symbol;
+};
+/**
+ * MotionUIScale component — Declarative animated equivalent of UIScale.
+ */
+export declare const MotionUIScale: React.ForwardRefExoticComponent<Omit<MotionUIScaleProps, "ref"> & React.RefAttributes<UIScale>>;

package/out/primitives/MotionUIScale.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local useVariantResolver = TS.import(script, script.Parent, "useVariantResolver").useVariantResolver
+--[[
+	*
+	 * MotionUIScale component — Declarative animated equivalent of UIScale.
+	 
+]]
+local MotionUIScale = forwardRef(function(props, ref)
+	local animate = props.animate
+	local initial = props.initial
+	local variants = props.variants
+	local transition = props.transition
+	-- We pass a dummy parser that just passes through styles,
+	-- because UIScale doesn't use CSS webStyle mappings.
+	local _binding = useVariantResolver(animate, initial, variants, transition, function(style)
+		return style
+	end)
+	local animatedProps = _binding.animatedProps
+	local staticProps = _binding.staticProps
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	local uiscaleProps = _object
+	uiscaleProps.animate = nil
+	uiscaleProps.initial = nil
+	uiscaleProps.variants = nil
+	uiscaleProps.transition = nil
+	uiscaleProps._motionUIScaleProps = nil
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in uiscaleProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in staticProps do
+		_attributes[_k] = _v
+	end
+	for _k, _v in animatedProps do
+		_attributes[_k] = _v
+	end
+	return React.createElement("uiscale", _attributes)
+end)
+return {
+	MotionUIScale = MotionUIScale,
+}

package/out/primitives/ScrollBox.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ScrollBox.tsx — A scrollable container component for Roblox.
+ *
+ * Provides a scrollable <div> equivalent that supports a web-like CSS syntax (`style` prop).
+ * It automatically translates CSS properties (e.g., `backgroundColor: "red"`) into
+ * Roblox engine equivalents (`BackgroundColor3`) and injects layout constraints
+ * like `UICorner`, `UIPadding`, `UIListLayout`, and `UIGridLayout` as child instances.
+ *
+ * Mirrors the architecture of Box.tsx but renders a native <scrollingframe> instead
+ * of a <frame>, with clean defaults for a modern scrolling experience.
+ *
+ * Usage:
+ *   <ScrollBox style={{ width: "100%", height: "300px", display: "flex", gap: "8px" }}>
+ *     <textlabel Text="Item 1" />
+ *     <textlabel Text="Item 2" />
+ *   </ScrollBox>
+ */
+import React from "@rbxts/react";
+import { CSSProperties } from "../styles/webStyle";
+export type ScrollBoxProps = React.PropsWithChildren<React.ComponentProps<"scrollingframe">> & {
+    style?: CSSProperties;
+} & {
+    readonly _scrollBoxProps?: unique symbol;
+};
+export declare const ScrollBox: React.ForwardRefExoticComponent<Omit<ScrollBoxProps, "ref"> & React.RefAttributes<ScrollingFrame>>;