@snailycfx/stylesheet 1.0.10

package/out/elements/init.luau

@@ -0,0 +1,316 @@
+-- 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 useEffect = _react.useEffect
+local useRef = _react.useRef
+local useContext = _react.useContext
+local _core = TS.import(script, script.Parent, "core")
+local createNode = _core.createNode
+local updateNodeStyle = _core.updateNodeStyle
+local removeNode = _core.removeNode
+local runLayout = _core.runLayout
+local writeVisual = _core.writeVisual
+local getRoot = _core.getRoot
+local StyleSheet = TS.import(script, script.Parent, "stylesheet").StyleSheet
+-- ── Context ───────────────────────────────────────────────────────────────────
+local NodeContext = React.createContext(nil)
+-- ── Tipos ─────────────────────────────────────────────────────────────────────
+-- ── Hook central ──────────────────────────────────────────────────────────────
+local function useLayoutNode(ref, style, className, disabled)
+	local parentNode = useContext(NodeContext)
+	local nodeRef = useRef()
+	local prevStyleRef = useRef()
+	-- Fusión de estilos — solo recalcular si alguno de los dos cambió
+	local base = StyleSheet:compose(className, style)
+	local activeStyle = if disabled and base[":disabled"] then StyleSheet:withPseudo(base, ":disabled") else base
+	useEffect(function()
+		local instance = ref.current
+		if not instance then
+			return nil
+		end
+		-- Primer montaje
+		local node = createNode(instance, activeStyle, parentNode)
+		nodeRef.current = node
+		prevStyleRef.current = activeStyle
+		-- Escribir visual inicial (sin prev — primera vez)
+		writeVisual(instance, activeStyle)
+		-- Layout
+		runLayout(getRoot(node))
+		-- Escuchar resize del contenedor
+		local sizeConn = instance:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
+			return runLayout(getRoot(node))
+		end)
+		-- Pseudo-estado :hover
+		local connections = { sizeConn }
+		if base[":hover"] then
+			local hoverStyle = StyleSheet:withPseudo(base, ":hover")
+			local _arg0 = instance.MouseEnter:Connect(function()
+				if disabled then
+					return nil
+				end
+				writeVisual(instance, hoverStyle, activeStyle)
+			end)
+			local _arg1 = instance.MouseLeave:Connect(function()
+				writeVisual(instance, activeStyle, hoverStyle)
+			end)
+			-- ▼ Array.push ▼
+			table.insert(connections, _arg0)
+			table.insert(connections, _arg1)
+			-- ▲ Array.push ▲
+		end
+		-- Pseudo-estado :active
+		if base[":active"] then
+			local activeStateStyle = StyleSheet:withPseudo(base, ":active")
+			local btn = instance
+			local _arg0 = btn.MouseButton1Down:Connect(function()
+				if disabled then
+					return nil
+				end
+				writeVisual(instance, activeStateStyle, activeStyle)
+			end)
+			local _arg1 = btn.MouseButton1Up:Connect(function()
+				writeVisual(instance, activeStyle, activeStateStyle)
+			end)
+			-- ▼ Array.push ▼
+			table.insert(connections, _arg0)
+			table.insert(connections, _arg1)
+			-- ▲ Array.push ▲
+		end
+		return function()
+			-- ▼ ReadonlyArray.forEach ▼
+			local _callback = function(c)
+				return c:Disconnect()
+			end
+			for _k, _v in connections do
+				_callback(_v, _k - 1, connections)
+			end
+			-- ▲ ReadonlyArray.forEach ▲
+			removeNode(node)
+			if parentNode then
+				runLayout(getRoot(parentNode))
+			end
+		end
+	end, {})
+	-- Actualizar estilo cuando cambia
+	useEffect(function()
+		local node = nodeRef.current
+		if not node then
+			return nil
+		end
+		local prev = prevStyleRef.current
+		if prev == activeStyle then
+			return nil
+		end
+		updateNodeStyle(node, activeStyle)
+		writeVisual(node.instance, activeStyle, prev)
+		prevStyleRef.current = activeStyle
+		runLayout(getRoot(node))
+	end, { activeStyle })
+	return nodeRef.current
+end
+-- ── Elementos ─────────────────────────────────────────────────────────────────
+local function div(props)
+	local ref = useRef()
+	local node = useLayoutNode(ref, props.style, props.className)
+	return React.createElement(NodeContext.Provider, {
+		value = node,
+	}, React.createElement("frame", {
+		ref = ref,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		LayoutOrder = props.layoutOrder,
+	}, props.children))
+end
+local function span(props)
+	local ref = useRef()
+	local node = useLayoutNode(ref, props.style, props.className)
+	local _attributes = {
+		ref = ref,
+	}
+	local _condition = props.text
+	if _condition == nil then
+		_condition = ""
+	end
+	_attributes.Text = _condition
+	local _condition_1 = props.richText
+	if _condition_1 == nil then
+		_condition_1 = false
+	end
+	_attributes.RichText = _condition_1
+	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
+	_attributes.LayoutOrder = props.layoutOrder
+	_attributes.TextWrapped = true
+	return React.createElement(NodeContext.Provider, {
+		value = node,
+	}, React.createElement("textlabel", _attributes, props.children))
+end
+local function button(props)
+	local ref = useRef()
+	local node = useLayoutNode(ref, props.style, props.className, props.disabled)
+	local _attributes = {
+		ref = ref,
+	}
+	local _condition = props.text
+	if _condition == nil then
+		_condition = ""
+	end
+	_attributes.Text = _condition
+	_attributes.Active = not props.disabled
+	_attributes.AutoButtonColor = false
+	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
+	_attributes.LayoutOrder = props.layoutOrder
+	_attributes.Event = {
+		MouseButton1Click = function()
+			if not props.disabled then
+				local _result = props.onClick
+				if _result ~= nil then
+					_result()
+				end
+			end
+		end,
+		MouseEnter = function()
+			local _result = props.onMouseEnter
+			if _result ~= nil then
+				_result = _result()
+			end
+			return _result
+		end,
+		MouseLeave = function()
+			local _result = props.onMouseLeave
+			if _result ~= nil then
+				_result = _result()
+			end
+			return _result
+		end,
+	}
+	return React.createElement(NodeContext.Provider, {
+		value = node,
+	}, React.createElement("textbutton", _attributes, props.children))
+end
+local function img(props)
+	local ref = useRef()
+	local node = useLayoutNode(ref, props.style, props.className)
+	local scaleTypeMap = {
+		fit = Enum.ScaleType.Fit,
+		crop = Enum.ScaleType.Crop,
+		stretch = Enum.ScaleType.Stretch,
+		tile = Enum.ScaleType.Tile,
+	}
+	return React.createElement(NodeContext.Provider, {
+		value = node,
+	}, React.createElement("imagelabel", {
+		ref = ref,
+		Image = props.src,
+		ScaleType = scaleTypeMap[props.scaleType or "fit"],
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		LayoutOrder = props.layoutOrder,
+	}, props.children))
+end
+local function input(props)
+	local ref = useRef()
+	local node = useLayoutNode(ref, props.style, props.className)
+	local _attributes = {
+		ref = ref,
+	}
+	local _condition = props.value
+	if _condition == nil then
+		_condition = ""
+	end
+	_attributes.Text = _condition
+	local _condition_1 = props.placeholder
+	if _condition_1 == nil then
+		_condition_1 = ""
+	end
+	_attributes.PlaceholderText = _condition_1
+	local _condition_2 = props.clearOnFocus
+	if _condition_2 == nil then
+		_condition_2 = false
+	end
+	_attributes.ClearTextOnFocus = _condition_2
+	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
+	_attributes.LayoutOrder = props.layoutOrder
+	_attributes.Event = {
+		FocusLost = function(box)
+			local _result = props.onChanged
+			if _result ~= nil then
+				_result = _result(box.Text)
+			end
+			return _result
+		end,
+	}
+	return React.createElement(NodeContext.Provider, {
+		value = node,
+	}, React.createElement("textbox", _attributes, props.children))
+end
+local function ul(props)
+	local ref = useRef()
+	local node = useLayoutNode(ref, props.style, props.className)
+	local _attributes = {
+		ref = ref,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	local _condition = props.scrollBarThickness
+	if _condition == nil then
+		_condition = 4
+	end
+	_attributes.ScrollBarThickness = _condition
+	_attributes.ScrollingDirection = if props.scrollDirection == "horizontal" then Enum.ScrollingDirection.X else Enum.ScrollingDirection.Y
+	_attributes.CanvasSize = UDim2.fromScale(0, 0)
+	_attributes.AutomaticCanvasSize = if props.scrollDirection == "horizontal" then Enum.AutomaticSize.X else Enum.AutomaticSize.Y
+	_attributes.LayoutOrder = props.layoutOrder
+	return React.createElement(NodeContext.Provider, {
+		value = node,
+	}, React.createElement("scrollingframe", _attributes, props.children))
+end
+local function canvas(props)
+	local ref = useRef()
+	local node = useLayoutNode(ref, props.style, props.className)
+	return React.createElement(NodeContext.Provider, {
+		value = node,
+	}, React.createElement("viewportframe", {
+		ref = ref,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		LayoutOrder = props.layoutOrder,
+	}, props.children))
+end
+local function video(props)
+	local ref = useRef()
+	local node = useLayoutNode(ref, props.style, props.className)
+	local _attributes = {
+		ref = ref,
+		Video = props.src,
+	}
+	local _condition = props.looped
+	if _condition == nil then
+		_condition = false
+	end
+	_attributes.Looped = _condition
+	local _condition_1 = props.playing
+	if _condition_1 == nil then
+		_condition_1 = false
+	end
+	_attributes.Playing = _condition_1
+	_attributes.BackgroundTransparency = 1
+	_attributes.BorderSizePixel = 0
+	_attributes.LayoutOrder = props.layoutOrder
+	return React.createElement(NodeContext.Provider, {
+		value = node,
+	}, React.createElement("videoframe", _attributes, props.children))
+end
+return {
+	div = div,
+	span = span,
+	button = button,
+	img = img,
+	input = input,
+	ul = ul,
+	canvas = canvas,
+	video = video,
+}

package/out/index.d.ts

@@ -0,0 +1,11 @@
+export { StyleSheet } from "./stylesheet";
+export * as elements from "./elements";
+export type { RbxStyle, RbxStyleBase } from "./core";
+export type { UDimValue, ColorValue, GradientStop } from "./core";
+export type { SpacingStyle, SizeStyle, BackgroundStyle } from "./core";
+export type { BorderStyle, TextStyle } from "./core";
+export type { LayoutStyle, Display, FlexDirection, JustifyContent, AlignItems, AlignContent, FlexWrap } from "./core";
+export type { PositionStyle, PositionType, MiscStyle } from "./core";
+export { writeVisual, runLayout, runLayoutImmediate, markLayoutDirty, getRoot, createNode, updateNodeStyle, removeNode, parseColor, parseUDim, parseUDim2 } from "./core";
+export type { LayoutNode } from "./core";
+//# sourceMappingURL=index.d.ts.map

package/out/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAS,cAAc,CAAA;AAC5C,OAAO,KAAK,QAAQ,MAAU,YAAY,CAAA;AAE1C,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAA+B,QAAQ,CAAA;AAC7E,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,MAAkB,QAAQ,CAAA;AAC7E,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAa,QAAQ,CAAA;AAC7E,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAA+B,QAAQ,CAAA;AAC7E,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACrH,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAe,QAAQ,CAAA;AAG7E,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACzK,YAAY,EAAE,UAAU,EAAE,MAA4C,QAAQ,CAAA"}

package/out/init.luau

@@ -0,0 +1,19 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.StyleSheet = TS.import(script, script, "stylesheet").StyleSheet
+exports.elements = TS.import(script, script, "elements")
+-- API avanzada para extensión del paquete
+local _core = TS.import(script, script, "core")
+exports.writeVisual = _core.writeVisual
+exports.runLayout = _core.runLayout
+exports.runLayoutImmediate = _core.runLayoutImmediate
+exports.markLayoutDirty = _core.markLayoutDirty
+exports.getRoot = _core.getRoot
+exports.createNode = _core.createNode
+exports.updateNodeStyle = _core.updateNodeStyle
+exports.removeNode = _core.removeNode
+exports.parseColor = _core.parseColor
+exports.parseUDim = _core.parseUDim
+exports.parseUDim2 = _core.parseUDim2
+return exports

package/out/stylesheet/index.d.ts

@@ -0,0 +1,25 @@
+import type { RbxStyle } from "../core";
+type StyleMap = Record<string, RbxStyle>;
+type PseudoKey = ":hover" | ":active" | ":disabled" | ":focus";
+type VariantConfig<V extends Record<string, Record<string, RbxStyle>>> = {
+    base: RbxStyle;
+    variants: V;
+    defaultVariants?: {
+        [K in keyof V]?: keyof V[K];
+    };
+};
+type VariantProps<V extends Record<string, Record<string, RbxStyle>>> = {
+    [K in keyof V]?: keyof V[K];
+};
+export declare const StyleSheet: {
+    create<T extends StyleMap>(styles: T): T;
+    /**
+     * Fusiona estilos. Itera con next() en vez de pairs() para mejor rendimiento.
+     */
+    compose(...styles: Array<RbxStyle | undefined | false>): RbxStyle;
+    createVariants<V extends Record<string, Record<string, RbxStyle>>>(config: VariantConfig<V>): (props?: VariantProps<V>) => RbxStyle;
+    createTheme<T extends Record<string, Record<string, unknown>>>(tokens: T): T;
+    withPseudo(base: RbxStyle, pseudo: PseudoKey): RbxStyle;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/out/stylesheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stylesheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAgB,MAAM,SAAS,CAAA;AAErD,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAA;AAE9D,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,IAAI;IACxE,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,EAAE,CAAC,CAAA;IACX,eAAe,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;KAAE,CAAA;CACjD,CAAA;AAED,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,IAAI;KACtE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAA;AAED,eAAO,MAAM,UAAU;WACf,CAAC,SAAS,QAAQ,UAAU,CAAC,GAAG,CAAC;IAIxC;;OAEG;uBACgB,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC,GAAG,QAAQ;mBAoBlD,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,UACxD,aAAa,CAAC,CAAC,CAAC,GACtB,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,QAAQ;gBAoB5B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC;qBAI3D,QAAQ,UAAU,SAAS,GAAG,QAAQ;CAKvD,CAAA"}

package/out/stylesheet/init.luau

@@ -0,0 +1,71 @@
+-- Compiled with roblox-ts v3.0.0
+local StyleSheet
+StyleSheet = {
+	create = function(self, styles)
+		return styles
+	end,
+	compose = function(self, ...)
+		local styles = { ... }
+		-- Caso rápido: un solo estilo no undefined
+		local nonNull
+		local count = 0
+		for _, s in styles do
+			if s then
+				nonNull = s
+				count += 1
+			end
+		end
+		if count == 0 then
+			return {}
+		end
+		if count == 1 then
+			return nonNull
+		end
+		local result = {}
+		for _, style in styles do
+			if not style then
+				continue
+			end
+			for key, value in pairs(style) do
+				result[key] = value
+			end
+		end
+		return result
+	end,
+	createVariants = function(self, config)
+		-- Pre-computar las combinaciones más comunes no es viable sin conocer los props,
+		-- pero podemos evitar allocations innecesarias en el path feliz
+		return function(props)
+			local resolved = (props or {})
+			local defaults = (config.defaultVariants or {})
+			local parts = { config.base }
+			for key, variantMap in pairs(config.variants) do
+				local _condition = resolved[key]
+				if _condition == nil then
+					_condition = defaults[key]
+				end
+				local chosen = _condition
+				if chosen ~= nil then
+					local s = variantMap[chosen]
+					if s then
+						table.insert(parts, s)
+					end
+				end
+			end
+			return StyleSheet:compose(unpack(parts))
+		end
+	end,
+	createTheme = function(self, tokens)
+		return tokens
+	end,
+	withPseudo = function(self, base, pseudo)
+		local pseudoStyle = base[pseudo]
+		if not pseudoStyle then
+			return base
+		end
+		return StyleSheet:compose(base, pseudoStyle)
+	end,
+}
+return {
+	StyleSheet = StyleSheet,
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "@snailycfx/stylesheet",
+    "version": "1.0.10",
+    "description": "CSS-inspired StyleSheet system for roblox-ts and @rbxts/react",
+    "main": "out/init.lua",
+    "types": "out/index.d.ts",
+    "scripts": {
+        "build": "rbxtsc",
+        "watch": "rbxtsc -w",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "roblox",
+        "roblox-ts",
+        "rbxts",
+        "stylesheet",
+        "css",
+        "ui"
+    ],
+    "author": "Snaily",
+    "license": "MIT",
+    "peerDependencies": {
+        "@rbxts/react": "^17.3.7-ts.1",
+        "@rbxts/types": "^1.0.920",
+        "roblox-ts": "^3.0.0"
+    },
+    "devDependencies": {
+        "@rbxts/react": "^17.3.7-ts.1",
+        "@rbxts/compiler-types": "3.0.0-types.0",
+        "@rbxts/types": "^1.0.911",
+        "roblox-ts": "^3.0.0",
+        "typescript": "^5.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}