@k9kbdev/roblox-css 0.1.0

package/out/primitives/Button.luau

@@ -0,0 +1,170 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+--[[
+	*
+	 * Button.tsx — <button> equivalent for Roblox.
+	 *
+	 * Renders a <textbutton> with web-like style props.
+	 * Delegates CSS→Roblox translation to webStyle(), and adds text-content
+	 * manipulation features (textTransform, textDecoration, wordBreak) that
+	 * require mutating the Text string before rendering.
+	 * Typography mapping:
+	 *   CSS Property        → Roblox Output
+	 *   ─────────────────────────────────────────────────────────
+	 *   fontSize            → TextSize (number)
+	 *   fontFamily          → FontFace (Font object, defaults to BuilderSans)
+	 *   fontWeight          → FontFace weight (normal/bold/black → Regular/Bold/Heavy)
+	 *   textAlign           → TextXAlignment (left/center/right)
+	 *   whiteSpace          → TextWrapped (nowrap → false, otherwise true)
+	 *   color               → TextColor3 (Color3) + TextTransparency
+	 *
+	 * Event mapping:
+	 *   React Prop          → Roblox Output
+	 *   ─────────────────────────────────────────────────────────
+	 *   onClick             → Event.Activated
+	 *   onMouseEnter        → Event.MouseEnter
+	 *   onMouseLeave        → Event.MouseLeave
+	 *
+	 * Maps to: HTML <button> → Roblox <textbutton>
+	 * 
+	 * Usage:
+	 *   <Button 
+	 *     style={{ backgroundColor: "#007BFF", padding: "10px 20px", color: "white", borderRadius: "4px" }}
+	 *     onClick={() => print("Clicked!")}
+	 *   >
+	 *     Submit
+	 *   </Button>
+	 
+]]
+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
+--[[
+	*
+	 * Branded ButtonProps — the `_buttonProps` brand ensures strict nominal typing.
+	 * This prevents accidental bypasses or incorrect prop structures.
+	 
+]]
+--* Helper to construct a branded ButtonProps. 
+local function makeButtonProps(props)
+	return props
+end
+--[[
+	*
+	 * Button component — The primary component for interactive clickable elements.
+	 *
+	 * Maps to: HTML <button> → Roblox <textbutton>
+	 * Renders a native <textbutton>, mapping web styles and React-like event handlers (onClick, etc.).
+	 
+]]
+local Button = forwardRef(function(props, ref)
+	-- 1. Extract custom styling props, children, and event handlers
+	local style = props.style
+	local children = props.children
+	local onClick = props.onClick
+	local onMouseEnter = props.onMouseEnter
+	local onMouseLeave = props.onMouseLeave
+	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.style = nil
+	explicitProps.children = nil
+	explicitProps.onClick = nil
+	explicitProps.onMouseEnter = nil
+	explicitProps.onMouseLeave = 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
+	return React.createElement("textbutton", _attributes, parsedStyleChildren, if type(children) == "string" or type(children) == "number" then nil else children)
+end)
+return {
+	makeButtonProps = makeButtonProps,
+	Button = Button,
+}

package/out/primitives/Image.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Image.tsx — <img> equivalent for Roblox.
+ *
+ * Renders an <imagelabel> with web-like style props.
+ * Accepts `src` (maps to Image property) as rbxassetid:// URI.
+ *
+ * Maps to: HTML <img> → Roblox <imagelabel>
+ */
+import React from "@rbxts/react";
+import { CSSProperties } from "../styles/CSSTypes";
+import { DeepReadonly } from "../types";
+/**
+ * Branded ImageProps — the `_imageProps` brand ensures strict nominal typing.
+ * This prevents accidental bypasses or incorrect prop structures.
+ */
+export type ImageProps = React.PropsWithChildren<React.ComponentProps<"imagelabel">> & {
+    /**
+     * Web-like CSS styling object that automatically maps to Roblox properties
+     * and injects necessary UI constraints (UICorner, UIPadding, UIListLayout).
+     */
+    style?: CSSProperties;
+    /**
+     * The source URI of the image (e.g., rbxassetid://...).
+     */
+    src?: string;
+} & {
+    readonly _imageProps?: unique symbol;
+};
+/** Helper to construct a branded ImageProps. */
+export declare function makeImageProps(props: Omit<ImageProps, "_imageProps">): DeepReadonly<ImageProps>;
+/**
+ * Image component — The primary component for rendering images.
+ *
+ * Maps to: HTML <img> → Roblox <imagelabel>
+ * Renders a native <imagelabel> while mapping web styles and translating `src` to the `Image` property.
+ */
+export declare const Image: React.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/primitives/Image.luau

@@ -0,0 +1,79 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+--[[
+	*
+	 * Image.tsx — <img> equivalent for Roblox.
+	 *
+	 * Renders an <imagelabel> with web-like style props.
+	 * Accepts `src` (maps to Image property) as rbxassetid:// URI.
+	 *
+	 * Maps to: HTML <img> → Roblox <imagelabel>
+	 
+]]
+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
+--[[
+	*
+	 * Branded ImageProps — the `_imageProps` brand ensures strict nominal typing.
+	 * This prevents accidental bypasses or incorrect prop structures.
+	 
+]]
+--* Helper to construct a branded ImageProps. 
+local function makeImageProps(props)
+	return props
+end
+--[[
+	*
+	 * Image component — The primary component for rendering images.
+	 *
+	 * Maps to: HTML <img> → Roblox <imagelabel>
+	 * Renders a native <imagelabel> while mapping web styles and translating `src` to the `Image` property.
+	 
+]]
+local Image = forwardRef(function(props, ref)
+	-- 1. Extract custom styling props, src, and children
+	local style = props.style
+	local src = props.src
+	local children = props.children
+	local defaultProps = {
+		BackgroundTransparency = 1,
+	}
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	local explicitProps = _object
+	explicitProps.style = nil
+	explicitProps.src = nil
+	explicitProps.children = nil
+	-- 3. Map src prop to the Image property
+	if src ~= nil then
+		explicitProps.Image = src
+	end
+	local parsedStyleProps = {}
+	local parsedStyleChildren = {}
+	-- 4. If a style object is provided, compile it
+	if style then
+		local parsed = webStyle(style)
+		parsedStyleProps = parsed.props
+		parsedStyleChildren = parsed.children
+	end
+	-- 5. Render the native imagelabel 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
+	return React.createElement("imagelabel", _attributes, parsedStyleChildren, children)
+end)
+return {
+	makeImageProps = makeImageProps,
+	Image = Image,
+}

package/out/primitives/InlineText.d.ts

@@ -0,0 +1,25 @@
+/**
+ * InlineText.tsx — Rich text with inline image support for Roblox.
+ *
+ * Parses `<img src="..." width="N" height="N" />` tags from text strings
+ * and renders them as a horizontal row of <Text> and <Image> elements.
+ *
+ * Roblox's built-in RichText does NOT support inline images, so this component
+ * splits the string into text and image segments, rendering each as a separate
+ * element inside a flex row container.
+ *
+ * When no images are found, falls back to a plain <Text> element.
+ *
+ * Usage:
+ *   <InlineText style={{ fontSize: 18, color: "#FFF" }}>
+ *     {"Hello <img src=\"rbxassetid://123\" width=\"20\" height=\"20\" /> World!"}
+ *   </InlineText>
+ */
+import React from "@rbxts/react";
+import { CSSProperties } from "../styles/CSSTypes";
+interface InlineTextProps {
+    Text?: string;
+    style?: CSSProperties;
+}
+export declare function InlineText(props: InlineTextProps): React.JSX.Element;
+export {};

package/out/primitives/InlineText.luau

@@ -0,0 +1,273 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+--[[
+	*
+	 * InlineText.tsx — Rich text with inline image support for Roblox.
+	 *
+	 * Parses `<img src="..." width="N" height="N" />` tags from text strings
+	 * and renders them as a horizontal row of <Text> and <Image> elements.
+	 *
+	 * Roblox's built-in RichText does NOT support inline images, so this component
+	 * splits the string into text and image segments, rendering each as a separate
+	 * element inside a flex row container.
+	 *
+	 * When no images are found, falls back to a plain <Text> element.
+	 *
+	 * Usage:
+	 *   <InlineText style={{ fontSize: 18, color: "#FFF" }}>
+	 *     {"Hello <img src=\"rbxassetid://123\" width=\"20\" height=\"20\" /> World!"}
+	 *   </InlineText>
+	 
+]]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Box = TS.import(script, script.Parent, "Box").Box
+local Text = TS.import(script, script.Parent, "Text").Text
+local Image = TS.import(script, script.Parent, "Image").Image
+local _parseInlineImages = TS.import(script, script.Parent.Parent, "utils", "parseInlineImages")
+local parseInlineImages = _parseInlineImages.parseInlineImages
+local containsRichTextTags = _parseInlineImages.containsRichTextTags
+local function InlineText(props)
+	local _condition = props.Text
+	if _condition == nil then
+		_condition = ""
+	end
+	local text = _condition
+	local style = props.style
+	local segments = parseInlineImages(text)
+	-- Check if any segment is an image
+	local hasImages = false
+	for _, seg in segments do
+		if seg.type == "image" then
+			hasImages = true
+			break
+		end
+	end
+	-- --- Fallback: no images, render a plain <Text> ---
+	if not hasImages then
+		local _result
+		if style then
+			local _object = table.clone(style)
+			setmetatable(_object, nil)
+			_result = _object
+		else
+			_result = ({})
+		end
+		local textStyle = _result
+		-- Auto-enable richText if the text contains RichText tags and it's not already
+		-- being set by textDecoration (which sets RichText=true via webStyle)
+		if textStyle.richText == nil and textStyle.textDecoration == nil and containsRichTextTags(text) then
+			textStyle.richText = true
+		end
+		return React.createElement(Text, {
+			style = textStyle,
+			Text = text,
+		})
+	end
+	-- --- Images found: render a flex row with Text and Image segments ---
+	-- Only pass layout/positioning props to the Box (Frame) container.
+	-- Text-specific props (font, color, etc.) go to the Text children only.
+	local containerStyle = {
+		display = "flex",
+		flexDirection = "row",
+		alignItems = "center",
+	}
+	if style then
+		-- Layout / positioning / sizing — safe for Frame
+		if style.width ~= nil then
+			containerStyle.width = style.width
+		end
+		if style.height ~= nil then
+			containerStyle.height = style.height
+		end
+		if style.position ~= nil then
+			containerStyle.position = style.position
+		end
+		if style.left ~= nil then
+			containerStyle.left = style.left
+		end
+		if style.right ~= nil then
+			containerStyle.right = style.right
+		end
+		if style.top ~= nil then
+			containerStyle.top = style.top
+		end
+		if style.bottom ~= nil then
+			containerStyle.bottom = style.bottom
+		end
+		if style.padding ~= nil then
+			containerStyle.padding = style.padding
+		end
+		if style.paddingLeft ~= nil then
+			containerStyle.paddingLeft = style.paddingLeft
+		end
+		if style.paddingRight ~= nil then
+			containerStyle.paddingRight = style.paddingRight
+		end
+		if style.paddingTop ~= nil then
+			containerStyle.paddingTop = style.paddingTop
+		end
+		if style.paddingBottom ~= nil then
+			containerStyle.paddingBottom = style.paddingBottom
+		end
+		if style.gap ~= nil then
+			containerStyle.gap = style.gap
+		end
+		if style.backgroundColor ~= nil then
+			containerStyle.backgroundColor = style.backgroundColor
+		end
+		if style.background ~= nil then
+			containerStyle.background = style.background
+		end
+		if style.opacity ~= nil then
+			containerStyle.opacity = style.opacity
+		end
+		if style.borderRadius ~= nil then
+			containerStyle.borderRadius = style.borderRadius
+		end
+		if style.border ~= nil then
+			containerStyle.border = style.border
+		end
+		if style.zIndex ~= nil then
+			containerStyle.zIndex = style.zIndex
+		end
+		if style.overflow ~= nil then
+			containerStyle.overflow = style.overflow
+		end
+		if style.visibility ~= nil then
+			containerStyle.visibility = style.visibility
+		end
+		if style.maxWidth ~= nil then
+			containerStyle.maxWidth = style.maxWidth
+		end
+		if style.maxHeight ~= nil then
+			containerStyle.maxHeight = style.maxHeight
+		end
+		if style.minWidth ~= nil then
+			containerStyle.minWidth = style.minWidth
+		end
+		if style.minHeight ~= nil then
+			containerStyle.minHeight = style.minHeight
+		end
+		if style.justifyContent ~= nil then
+			containerStyle.justifyContent = style.justifyContent
+		end
+		if style.flexWrap ~= nil then
+			containerStyle.flexWrap = style.flexWrap
+		end
+		if style.boxShadow ~= nil then
+			containerStyle.boxShadow = style.boxShadow
+		end
+	end
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#segments)
+	local _callback = function(segment, i)
+		if segment.type == "text" then
+			-- Build a text-specific style that inherits typography from parent style
+			local segmentStyle = {}
+			local _result = style
+			if _result ~= nil then
+				_result = _result.fontSize
+			end
+			if _result ~= nil then
+				segmentStyle.fontSize = style.fontSize
+			end
+			local _result_1 = style
+			if _result_1 ~= nil then
+				_result_1 = _result_1.fontFamily
+			end
+			if _result_1 ~= nil then
+				segmentStyle.fontFamily = style.fontFamily
+			end
+			local _result_2 = style
+			if _result_2 ~= nil then
+				_result_2 = _result_2.fontWeight
+			end
+			if _result_2 ~= nil then
+				segmentStyle.fontWeight = style.fontWeight
+			end
+			local _result_3 = style
+			if _result_3 ~= nil then
+				_result_3 = _result_3.fontStyle
+			end
+			if _result_3 ~= nil then
+				segmentStyle.fontStyle = style.fontStyle
+			end
+			local _result_4 = style
+			if _result_4 ~= nil then
+				_result_4 = _result_4.color
+			end
+			if _result_4 ~= nil then
+				segmentStyle.color = style.color
+			end
+			local _result_5 = style
+			if _result_5 ~= nil then
+				_result_5 = _result_5.lineHeight
+			end
+			if _result_5 ~= nil then
+				segmentStyle.lineHeight = style.lineHeight
+			end
+			local _result_6 = style
+			if _result_6 ~= nil then
+				_result_6 = _result_6.whiteSpace
+			end
+			if _result_6 ~= nil then
+				segmentStyle.whiteSpace = style.whiteSpace
+			end
+			local _result_7 = style
+			if _result_7 ~= nil then
+				_result_7 = _result_7.textAlign
+			end
+			if _result_7 ~= nil then
+				segmentStyle.textAlign = style.textAlign
+			end
+			local _result_8 = style
+			if _result_8 ~= nil then
+				_result_8 = _result_8.textVerticalAlign
+			end
+			if _result_8 ~= nil then
+				segmentStyle.textVerticalAlign = style.textVerticalAlign
+			end
+			-- Always enable richText for text segments so <b>, <font> etc work
+			segmentStyle.richText = true
+			-- Apply textTransform and textDecoration from parent style
+			local _result_9 = style
+			if _result_9 ~= nil then
+				_result_9 = _result_9.textTransform
+			end
+			if _result_9 ~= nil then
+				segmentStyle.textTransform = style.textTransform
+			end
+			local _result_10 = style
+			if _result_10 ~= nil then
+				_result_10 = _result_10.textDecoration
+			end
+			if _result_10 ~= nil then
+				segmentStyle.textDecoration = style.textDecoration
+			end
+			return React.createElement(Text, {
+				key = `text-{i}`,
+				style = segmentStyle,
+				Text = segment.content,
+			})
+		end
+		-- Image segment
+		return React.createElement(Image, {
+			key = `img-{i}`,
+			src = segment.src,
+			style = {
+				width = segment.width,
+				height = segment.height,
+			},
+		})
+	end
+	for _k, _v in segments do
+		_newValue[_k] = _callback(_v, _k - 1, segments)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(Box, {
+		style = containerStyle,
+	}, _newValue)
+end
+return {
+	InlineText = InlineText,
+}

package/out/primitives/Input.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 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" }}
+ *   />
+ */
+import React from "@rbxts/react";
+import { CSSProperties } from "../styles/webStyle";
+import { DeepReadonly } from "../types";
+/**
+ * Branded InputProps — the `_inputProps` brand ensures strict nominal typing.
+ * This prevents accidental bypasses or incorrect prop structures.
+ */
+export type InputProps = React.PropsWithChildren<React.ComponentProps<"textbox">> & {
+    /**
+     * Web-like CSS styling object that automatically maps to Roblox properties
+     * and injects necessary UI constraints (UICorner, UIPadding, UIListLayout).
+     */
+    style?: CSSProperties;
+    /**
+     * Web-like alias for PlaceholderText.
+     * Sets the text that appears when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Fired when the text changes.
+     * Automatically maps to Roblox's `Change.Text` event.
+     */
+    onChange?: (text: string) => void;
+} & {
+    readonly _inputProps?: unique symbol;
+};
+/** Helper to construct a branded InputProps. */
+export declare function makeInputProps(props: Omit<InputProps, "_inputProps">): DeepReadonly<InputProps>;
+/**
+ * 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.
+ */
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<TextBox>>;