@lattice-ui/progress 0.3.2 → 0.4.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/progress@0.4.0 build C:\Users\retur\OneDrive\Desktop\Workspace\rojo\unnamed-ui-package\packages\progress
+> rbxtsc -p tsconfig.json
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/progress@0.4.0 typecheck /home/runner/work/lattice-ui/lattice-ui/packages/progress
+> tsc -p tsconfig.typecheck.json
+

package/out/Progress/ProgressIndicator.luau

@@ -1,27 +1,31 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
-local React = _core.React
-local Slot = _core.Slot
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
 local useProgressContext = TS.import(script, script.Parent, "context").useProgressContext
+local function toGuiPropBag(value)
+	local _value = value
+	return if type(_value) == "table" then value else {}
+end
 local function ProgressIndicator(props)
 	local progressContext = useProgressContext()
 	local widthScale = if progressContext.indeterminate then 0.35 else progressContext.ratio
-	local xScale = if progressContext.indeterminate then 0 else 0
 	if props.asChild then
 		local child = props.children
 		if not child then
 			error("[ProgressIndicator] `asChild` requires a child element.")
 		end
-		return React.createElement(Slot, {
-			Position = UDim2.fromScale(xScale, 0),
-			Size = UDim2.fromScale(widthScale, 1),
-		}, child)
+		local childProps = toGuiPropBag(child.props)
+		local _object = table.clone(childProps)
+		setmetatable(_object, nil)
+		_object.Position = UDim2.fromScale(0, 0)
+		_object.Size = UDim2.fromScale(widthScale, 1)
+		local mergedProps = _object
+		return React.cloneElement(child, mergedProps)
 	end
 	return React.createElement("frame", {
 		BackgroundColor3 = Color3.fromRGB(102, 156, 255),
 		BorderSizePixel = 0,
-		Position = UDim2.fromScale(xScale, 0),
+		Position = UDim2.fromScale(0, 0),
 		Size = UDim2.fromScale(widthScale, 1),
 	}, props.children)
 end

package/out/Progress/Spinner.luau

@@ -1,8 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local composeRefs = _core.composeRefs
 local React = _core.React
-local Slot = _core.Slot
 local RunService = game:GetService("RunService")
 local function toGuiObject(instance)
 	if not instance or not instance:IsA("GuiObject") then
@@ -10,6 +10,24 @@ local function toGuiObject(instance)
 	end
 	return instance
 end
+local function toGuiPropBag(value)
+	local _value = value
+	return if type(_value) == "table" then value else {}
+end
+local function toInstanceRef(value)
+	if value == nil then
+		return nil
+	end
+	local _value = value
+	if type(_value) == "function" then
+		return value
+	end
+	local _value_1 = value
+	if type(_value_1) == "table" then
+		return value
+	end
+	return nil
+end
 local function Spinner(props)
 	local _condition = props.spinning
 	if _condition == nil then
@@ -45,10 +63,13 @@ local function Spinner(props)
 		if not child then
 			error("[Spinner] `asChild` requires a child element.")
 		end
-		return React.createElement(Slot, {
-			Visible = spinning,
-			ref = setSpinnerRef,
-		}, child)
+		local childProps = toGuiPropBag(child.props)
+		local _object = table.clone(childProps)
+		setmetatable(_object, nil)
+		_object.Visible = spinning
+		_object.ref = composeRefs(toInstanceRef(childProps.ref), setSpinnerRef)
+		local mergedProps = _object
+		return React.cloneElement(child, mergedProps)
 	end
 	return React.createElement("frame", {
 		BackgroundTransparency = 1,
@@ -61,7 +82,16 @@ local function Spinner(props)
 	}), React.createElement("uistroke", {
 		Color = Color3.fromRGB(102, 156, 255),
 		Thickness = 2,
-	}))
+		Transparency = 0.35,
+	}), React.createElement("frame", {
+		AnchorPoint = Vector2.new(0.5, 0.5),
+		BackgroundColor3 = Color3.fromRGB(102, 156, 255),
+		BorderSizePixel = 0,
+		Position = UDim2.fromScale(0.5, 0.1),
+		Size = UDim2.fromOffset(4, 4),
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(1, 0),
+	})))
 end
 return {
 	Spinner = Spinner,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@lattice-ui/progress",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
   "dependencies": {
-    "@lattice-ui/core": "0.3.2"
+    "@lattice-ui/core": "0.4.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",

package/src/Progress/ProgressIndicator.tsx

@@ -1,12 +1,17 @@
-import { React, Slot } from "@lattice-ui/core";
+import { React } from "@lattice-ui/core";
 import { useProgressContext } from "./context";
 import type { ProgressIndicatorProps } from "./types";
 
+type GuiPropBag = React.Attributes & Record<string, unknown>;
+
+function toGuiPropBag(value: unknown): GuiPropBag {
+  return typeIs(value, "table") ? (value as GuiPropBag) : {};
+}
+
 export function ProgressIndicator(props: ProgressIndicatorProps) {
   const progressContext = useProgressContext();
 
   const widthScale = progressContext.indeterminate ? 0.35 : progressContext.ratio;
-  const xScale = progressContext.indeterminate ? 0 : 0;
 
   if (props.asChild) {
     const child = props.children;
@@ -14,18 +19,21 @@ export function ProgressIndicator(props: ProgressIndicatorProps) {
       error("[ProgressIndicator] `asChild` requires a child element.");
     }
 
-    return (
-      <Slot Position={UDim2.fromScale(xScale, 0)} Size={UDim2.fromScale(widthScale, 1)}>
-        {child}
-      </Slot>
-    );
+    const childProps = toGuiPropBag((child as { props?: unknown }).props);
+    const mergedProps: GuiPropBag = {
+      ...childProps,
+      Position: UDim2.fromScale(0, 0),
+      Size: UDim2.fromScale(widthScale, 1),
+    };
+
+    return React.cloneElement(child as React.ReactElement<GuiPropBag>, mergedProps);
   }
 
   return (
     <frame
       BackgroundColor3={Color3.fromRGB(102, 156, 255)}
       BorderSizePixel={0}
-      Position={UDim2.fromScale(xScale, 0)}
+      Position={UDim2.fromScale(0, 0)}
       Size={UDim2.fromScale(widthScale, 1)}
     >
       {props.children}

package/src/Progress/Spinner.tsx

@@ -1,8 +1,11 @@
-import { React, Slot } from "@lattice-ui/core";
+import { composeRefs, React } from "@lattice-ui/core";
+import type ReactTypes from "@rbxts/react";
 import type { SpinnerProps } from "./types";
 
 const RunService = game.GetService("RunService");
 
+type GuiPropBag = React.Attributes & Record<string, unknown>;
+
 function toGuiObject(instance: Instance | undefined) {
   if (!instance || !instance.IsA("GuiObject")) {
     return undefined;
@@ -11,6 +14,26 @@ function toGuiObject(instance: Instance | undefined) {
   return instance;
 }
 
+function toGuiPropBag(value: unknown): GuiPropBag {
+  return typeIs(value, "table") ? (value as GuiPropBag) : {};
+}
+
+function toInstanceRef(value: unknown): ReactTypes.Ref<Instance> | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+
+  if (typeIs(value, "function")) {
+    return value as (instance: Instance | undefined) => void;
+  }
+
+  if (typeIs(value, "table")) {
+    return value as ReactTypes.MutableRefObject<Instance | undefined>;
+  }
+
+  return undefined;
+}
+
 export function Spinner(props: SpinnerProps) {
   const spinning = props.spinning ?? true;
   const speedDegPerSecond = props.speedDegPerSecond ?? 180;
@@ -46,11 +69,14 @@ export function Spinner(props: SpinnerProps) {
       error("[Spinner] `asChild` requires a child element.");
     }
 
-    return (
-      <Slot Visible={spinning} ref={setSpinnerRef}>
-        {child}
-      </Slot>
-    );
+    const childProps = toGuiPropBag((child as { props?: unknown }).props);
+    const mergedProps: GuiPropBag = {
+      ...childProps,
+      Visible: spinning,
+      ref: composeRefs(toInstanceRef((childProps as { ref?: unknown }).ref), setSpinnerRef),
+    };
+
+    return React.cloneElement(child as React.ReactElement<GuiPropBag>, mergedProps);
   }
 
   return (
@@ -62,7 +88,16 @@ export function Spinner(props: SpinnerProps) {
       ref={setSpinnerRef}
     >
       <uicorner CornerRadius={new UDim(1, 0)} />
-      <uistroke Color={Color3.fromRGB(102, 156, 255)} Thickness={2} />
+      <uistroke Color={Color3.fromRGB(102, 156, 255)} Thickness={2} Transparency={0.35} />
+      <frame
+        AnchorPoint={new Vector2(0.5, 0.5)}
+        BackgroundColor3={Color3.fromRGB(102, 156, 255)}
+        BorderSizePixel={0}
+        Position={UDim2.fromScale(0.5, 0.1)}
+        Size={UDim2.fromOffset(4, 4)}
+      >
+        <uicorner CornerRadius={new UDim(1, 0)} />
+      </frame>
     </frame>
   );
 }