@lattice-ui/radio-group 0.5.0-next.1 → 0.5.0-next.3

package/out/RadioGroup/RadioGroupIndicator.luau

@@ -6,41 +6,52 @@ local Slot = _core.Slot
 local Presence = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out).Presence
 local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
 local createIndicatorRevealRecipe = _motion.createIndicatorRevealRecipe
-local usePresenceMotion = _motion.usePresenceMotion
+local usePresenceMotionController = _motion.usePresenceMotionController
 local useRadioGroupItemContext = TS.import(script, script.Parent, "context").useRadioGroupItemContext
 local function RadioGroupIndicatorImpl(props)
-	local motionRef = usePresenceMotion(props.motionPresent, props.transition or createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)), props.onExitComplete)
+	local defaultTransition = React.useMemo(function()
+		return createIndicatorRevealRecipe(UDim2.fromOffset(10, 10))
+	end, {})
+	local config = props.transition or defaultTransition
+	local motion = usePresenceMotionController({
+		present = props.present,
+		forceMount = props.forceMount,
+		config = config,
+		onExitComplete = props.onExitComplete,
+	})
+	local mounted = motion.mounted
+	local visible = mounted and (motion.present or motion.phase ~= "exited")
+	if not mounted then
+		return nil
+	end
 	if props.asChild then
 		local child = props.children
 		if not React.isValidElement(child) then
 			error("[RadioGroupIndicator] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, {
-			Visible = props.visible,
-			ref = motionRef,
+			Visible = visible,
+			ref = motion.ref,
 		}, child)
 	end
 	return React.createElement("frame", {
 		BackgroundColor3 = Color3.fromRGB(240, 244, 252),
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(10, 10),
-		Visible = props.visible,
-		ref = motionRef,
+		Visible = visible,
+		ref = motion.ref,
 	}, props.children)
 end
 local function RadioGroupIndicator(props)
 	local radioGroupItemContext = useRadioGroupItemContext()
 	local visible = radioGroupItemContext.checked
 	local forceMount = props.forceMount == true
-	local transition = React.useMemo(function()
-		return props.transition or createIndicatorRevealRecipe(UDim2.fromOffset(10, 10))
-	end, { props.transition })
 	if forceMount then
 		return React.createElement(RadioGroupIndicatorImpl, {
 			asChild = props.asChild,
-			motionPresent = visible,
-			transition = transition,
-			visible = visible,
+			forceMount = true,
+			present = visible,
+			transition = props.transition,
 		}, props.children)
 	end
 	return React.createElement(Presence, {
@@ -48,10 +59,9 @@ local function RadioGroupIndicator(props)
 		render = function(state)
 			return React.createElement(RadioGroupIndicatorImpl, {
 				asChild = props.asChild,
-				motionPresent = state.isPresent,
 				onExitComplete = state.onExitComplete,
-				transition = transition,
-				visible = true,
+				present = state.isPresent,
+				transition = props.transition,
 			}, props.children)
 		end,
 	})

package/out/RadioGroup/RadioGroupItem.luau

@@ -57,7 +57,11 @@ local function RadioGroupItem(props)
 		},
 	}, props.transition or createSelectionResponseRecipe())
 	local setItemRef = React.useCallback(function(instance)
-		local nextItem = if not instance or not instance:IsA("GuiObject") then nil else instance
+		local _result = instance
+		if _result ~= nil then
+			_result = _result:IsA("GuiObject")
+		end
+		local nextItem = if not _result then nil else instance
 		itemRef.current = nextItem
 		motionRef.current = nextItem
 	end, { motionRef })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/radio-group",
-  "version": "0.5.0-next.1",
+  "version": "0.5.0-next.3",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
@@ -16,10 +16,10 @@
     "url": "https://github.com/astra-void/lattice-ui.git"
   },
   "dependencies": {
-    "@lattice-ui/core": "0.5.0-next.1",
-    "@lattice-ui/motion": "0.5.0-next.1",
-    "@lattice-ui/layer": "0.5.0-next.1",
-    "@lattice-ui/focus": "0.5.0-next.1"
+    "@lattice-ui/core": "0.5.0-next.3",
+    "@lattice-ui/focus": "0.5.0-next.3",
+    "@lattice-ui/layer": "0.5.0-next.3",
+    "@lattice-ui/motion": "0.5.0-next.3"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -31,8 +31,8 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "lint": "biome check src",
+    "lint:fix": "biome check src --write --unsafe",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "watch": "rbxtsc -p tsconfig.json -w"
   }

package/src/RadioGroup/RadioGroupIndicator.tsx

@@ -1,22 +1,37 @@
 import { React, Slot } from "@lattice-ui/core";
 import { Presence } from "@lattice-ui/layer";
-import { createIndicatorRevealRecipe, type PresenceMotionConfig, usePresenceMotion } from "@lattice-ui/motion";
+import {
+  createIndicatorRevealRecipe,
+  type PresenceMotionConfig,
+  usePresenceMotionController,
+} from "@lattice-ui/motion";
 import { useRadioGroupItemContext } from "./context";
 import type { RadioGroupIndicatorProps } from "./types";
 
 function RadioGroupIndicatorImpl(props: {
-  motionPresent: boolean;
-  visible: boolean;
+  present: boolean;
+  forceMount?: boolean;
   transition?: PresenceMotionConfig;
   onExitComplete?: () => void;
   asChild?: boolean;
   children?: React.ReactNode;
 }) {
-  const motionRef = usePresenceMotion<Frame>(
-    props.motionPresent,
-    props.transition ?? createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)),
-    props.onExitComplete,
-  );
+  const defaultTransition = React.useMemo(() => createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)), []);
+  const config = props.transition ?? defaultTransition;
+
+  const motion = usePresenceMotionController<Frame>({
+    present: props.present,
+    forceMount: props.forceMount,
+    config,
+    onExitComplete: props.onExitComplete,
+  });
+
+  const mounted = motion.mounted;
+  const visible = mounted && (motion.present || motion.phase !== "exited");
+
+  if (!mounted) {
+    return undefined;
+  }
 
   if (props.asChild) {
     const child = props.children;
@@ -25,7 +40,7 @@ function RadioGroupIndicatorImpl(props: {
     }
 
     return (
-      <Slot Visible={props.visible} ref={motionRef}>
+      <Slot Visible={visible} ref={motion.ref}>
         {child}
       </Slot>
     );
@@ -36,8 +51,8 @@ function RadioGroupIndicatorImpl(props: {
       BackgroundColor3={Color3.fromRGB(240, 244, 252)}
       BorderSizePixel={0}
       Size={UDim2.fromOffset(10, 10)}
-      Visible={props.visible}
-      ref={motionRef}
+      Visible={visible}
+      ref={motion.ref}
     >
       {props.children}
     </frame>
@@ -49,18 +64,13 @@ export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
   const visible = radioGroupItemContext.checked;
   const forceMount = props.forceMount === true;
 
-  const transition = React.useMemo(
-    () => props.transition ?? createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)),
-    [props.transition],
-  );
-
   if (forceMount) {
     return (
       <RadioGroupIndicatorImpl
         asChild={props.asChild}
-        motionPresent={visible}
-        transition={transition}
-        visible={visible}
+        forceMount={true}
+        present={visible}
+        transition={props.transition}
       >
         {props.children}
       </RadioGroupIndicatorImpl>
@@ -73,10 +83,9 @@ export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
       render={(state) => (
         <RadioGroupIndicatorImpl
           asChild={props.asChild}
-          motionPresent={state.isPresent}
           onExitComplete={state.onExitComplete}
-          transition={transition}
-          visible={true}
+          present={state.isPresent}
+          transition={props.transition}
         >
           {props.children}
         </RadioGroupIndicatorImpl>

package/src/RadioGroup/RadioGroupItem.tsx

@@ -56,7 +56,7 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
 
   const setItemRef = React.useCallback(
     (instance: Instance | undefined) => {
-      const nextItem = !instance || !instance.IsA("GuiObject") ? undefined : instance;
+      const nextItem = !instance?.IsA("GuiObject") ? undefined : instance;
       itemRef.current = nextItem;
       motionRef.current = nextItem;
     },